<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>拉勾教育</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"
            crossorigin="anonymous"></script>
</head>
<body>

<div align="center">
    <img src="../img/course.png" height="800" width="1200" usemap="#buttonmap"/>
    <map name="buttonmap" id="buttonmap">
        <area id="orderButton" shape="rect" coords="622,370,854,426" href="#"/>
    </map>
</div>
<script>

    $(document).ready(function () {
        $("#orderButton").click(function () {
            $.post("http://localhost:8080/order", {userId: 1, courseId: 1}, function (orderId) {
                if (orderId != null && orderId != "") {
                    alert("已生成订单：" + orderId);
                    window.location.href="pay.html?orderId=" + orderId;
                }
            });
        });
    })

</script>
</body>
</html>